<template>
  <!--分配评阅专家-->
  <div class="result-release">
    <InnerBreadcrumb v-model="indexKey" :path="breadPath" :showBack="true"/>
    <div class="edu-page-warp" v-show="indexKey === 'MAIN'">
      <condition-card @reset="reset" @search="searchList" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="毕业年份">
              <el-date-picker class="search-item" :clearable="false" v-model="queryForm.graduationYear"
                              @change="handleGradeChange" value-format="yyyy" type="year"
                              placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行政学院">
              <el-select v-model="queryForm.collegeId" filterable @change="handleCollegeChange"
                         class="search-item" clearable>
                <el-option v-for="item in source.studentColleges" :key="item.collegeId"
                           :label="item.collegeIdI18n" :value="item.collegeId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业">
              <el-select v-model="queryForm.subjectId" filterable class="search-item" clearable>
                <el-option v-for="item in source.subjectOptions" :key="item.subjectId"
                           :label="item.subjectName" :value="item.subjectId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="课题名称">
              <el-input v-model="queryForm.projectName" placeholder="请输入" class="search-item"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <el-card shadow="never">
        <div class="edu-page-title">分配评阅专家</div>
        <div class="edu-opertion-bar">
          <div class="float-left">
            <el-input v-model="queryForm.studentName" placeholder="请输入学生姓名、学号搜索" style="width:300px"
                      @keyup.enter.native="searchList" clearable>
              <i slot="suffix" class="el-icon-search" style="margin-top:10px;cursor:pointer"
                 @click="searchList"></i>
            </el-input>
          </div>
          <div class="float-right">
            <el-button @click="onExport" v-loading.fullscreen.lock="loading"
                       element-loading-text="Loading" element-loading-spinner="el-icon-loading"
                       element-loading-background="rgba(255, 255, 255, .48)">导出
            </el-button>
            <el-button type="primary" @click="assignReviewer">分配专家</el-button>
          </div>
        </div>
        <edu-table ref="resultReleaseTable" :url="getList" @selection-change="handleSelectChange">
          <edu-table-column label="毕业年份" prop="graduationYear" min-width="80"></edu-table-column>
          <edu-table-column label="学生姓名" prop="studentName" min-width="90"></edu-table-column>
          <edu-table-column label="课题名称" prop="projectName" min-width="100"></edu-table-column>
          <edu-table-column label="行政学院" prop="collegeIdI18n" min-width="100"></edu-table-column>
          <edu-table-column label="专业" prop="subjectIdI18n" min-width="90"></edu-table-column>
          <edu-table-column label="方向" prop="direction" min-width="80"></edu-table-column>
          <edu-table-column label="评阅专家" prop="reviewerName" min-width="80"></edu-table-column>
          <edu-table-column label="评审成绩" prop="reviewResult" :formatter="resultFormat"
                            min-width="80"></edu-table-column>
          <edu-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.reviewResult != null" type="text" @click="onView(scope.row)">查看
              </el-button>
              <el-button v-if="scope.row.reviewResult == null && scope.row.reviewerName" type="text"
                         @click="edit(scope.row)">编辑
              </el-button>
              <el-button v-if="!scope.row.reviewerName" type="text" @click="edit(scope.row)">分配
              </el-button>
            </template>
          </edu-table-column>
        </edu-table>
      </el-card>
    </div>
    <!--查看dialog-->
    <el-dialog :title.sync="dialogConfig.title" :visible.sync="dialogConfig.showDialog" width="45%">
      <el-form :model="dialogConfig.formData" :inline="true">
        <el-row style="height: 50px;">
          <el-form-item label="课题名称：" :label-width="dialogConfig.formLabelWidth" prop="projectName">
            <el-input v-model="dialogConfig.formData.projectName" style="width:350px"
                      disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评阅专家：" :label-width="dialogConfig.formLabelWidth"
                        prop="reviewerName">
            <el-input style="width:350px" v-model="dialogConfig.formData.reviewerName"
                      disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评阅成绩：" :label-width="dialogConfig.formLabelWidth"
                        prop="reviewResult">
            <el-select style="width:350px" v-model="dialogConfig.formData.reviewResult" disabled>
              <el-option v-for="item in resultTypeOptions" :key="item.value" :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="论文原件：" :label-width="dialogConfig.formLabelWidth"
                        prop="dissertationPath">
            <el-button type="text" @click="downloadAttach(dialogConfig.formData.dissertationPath)">
              {{dialogConfig.formData.dissertationName}}
            </el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="其它附件：" :label-width="dialogConfig.formLabelWidth" prop="attachPath">
            <el-button type="text" @click="downloadAttach(dialogConfig.formData.attachPath)">
              {{dialogConfig.formData.attachName}}
            </el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="评阅意见：" :label-width="dialogConfig.formLabelWidth" prop="remark">
            <el-input type="textarea" maxlength="500" style="width:350px;"
                      v-model="dialogConfig.formData.reviewOpinion" disabled></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">返回</el-button>
        </span>
    </el-dialog>
    <!--分配-->
    <Assign ref="assignReviewer" :selectStudentList="selectStudentList" @reviewBack="reviewBack()"
            v-if="indexKey === 'ASSIGN'"></Assign>
  </div>
</template>
<script>
  import API from "common/src/api/underGraduationDesign/assignReviewers";
  import tools from 'common/src/views/underGraduationDesign/tools.js';
  export default {
    name: 'designResultRelease',
    data() {
      return {
        api: API,
        getList: '/api/designservice/reviewManage/queryReviewList?role=0',
        queryForm: {
          graduationYear: '',
          collegeId: '',
          subjectId: '',
          projectName: ''
        },
        indexKey: 'MAIN',
        source: {
          studentColleges: [], // 行政学院
          collegeOptions: [], // 学院
          subjectOptions: [] // 专业
        },
        resultSelectedData: [], // 勾选的列表数据
        selectStudentList: [],
        breadPath: {
          label: "毕业设计（论文）成绩发布",
          key: "MAIN",
          children: [
            {
              key: "ASSIGN",
              label: "分配评阅专家"
            }
          ]
        },
        loading: false,
        resultTypeOptions: [{
          label: '优',
          value: 0
        }, {
          label: '良',
          value: 1
        }, {
          label: '中',
          value: 2
        }, {
          label: '及格',
          value: 3
        }, {
          label: '不及格',
          value: 4
        }],
        dialogConfig: {
          title: "评阅详情",
          showDialog: false,
          formLabelWidth: "150px",
          formData: {
            projectName: "",
            reviewerName: "",
            reviewResult: "",
            dissertationPath: "",
            reviewOpinion: "",
            attachPath: "",
            dissertationName: "",
            attachName: ""
          }
        },
      };
    },
    mounted() {
      this.queryForm.graduationYear = new Date().getFullYear() + '';
      this.getCollege();
      this.queryForm.activeAuthId = localStorage.getItem("activeAuthId");
      this.searchList();
      tools.initAllCollege(this.source.studentColleges);
    },
    methods: {
      searchList() {
        this.$refs.resultReleaseTable.search(this.queryForm);
      },
      reset() {
        this.queryForm = {
          graduationYear: '',
          collegeId: '',
          subjectId: '',
          activeAuthId: '',
          teachingClassCode: ''
        };
        this.queryForm.activeAuthId = localStorage.getItem("activeAuthId");
        this.queryForm.graduationYear = new Date().getFullYear() + '';
        this.searchList();
      },
      handleSelectChange(val) {
        this.resultSelectedData = val;
      },
      // 毕业年份change
      handleGradeChange(val) {
        this.queryForm.subjectId = "";
        this.source.subjectOptions = [];
        if (val && this.queryForm.collegeId) {
          this.handleCollegeChange(this.queryForm.collegeId);
        }
      },
      closeDialog() {
        this.dialogConfig.showDialog = false;
      },
      // 查学院
      getCollege() {
        this.api.getCollege().then(res => {
          this.source.collegeOptions = res;
        });
      },
      // 根据年份学院查专业
      handleCollegeChange(val) {
        this.queryForm.subjectId = "";
        this.source.subjectOptions = [];
        if (val && this.queryForm.graduationYear) {
          const params = {
            grade: this.queryForm.graduationYear,
            college: val
          };
          this.api.getSubject(params).then(res => {
            this.source.subjectOptions = res.data;
          }).catch();
        }
      },
      // 成绩格式化
      resultFormat(row, column, cellValue, index) {
        let resultLabel = cellValue;
        this.resultTypeOptions.forEach(item => {
          if (item.value === cellValue) {
            resultLabel = item.label;
          }
        });
        return resultLabel;
      },
      // 查看
      onView(row) {
        this.dialogConfig.formData = row
        this.dialogConfig.showDialog = true
      },
      // 分配、修改
      edit(row) {
        this.selectStudentList = [row]
        this.indexKey = "ASSIGN";
      },
      reviewBack() {
        this.indexKey = "MAIN";
        this.searchList();
      },
      // 批量分配评阅专家
      assignReviewer() {
        // 校验勾选中是否有已分配的
        if (this.resultSelectedData.length == 0) {
          this.showMsg("请勾选再进行分配");
          return
        }
        for (let i = 0; i < this.resultSelectedData.length; i++) {
          if (this.resultSelectedData[i].reviewer) {
            this.showMsg("勾选记录中存在已经分配的学生");
            return
          }
        }
        ;
        this.selectStudentList = this.resultSelectedData
        this.indexKey = "ASSIGN";
      },
      showMsg(msg, data) {
        if (window.isSessionDialogOut !== true) {
          window.isSessionDialogOut = true; // 解决会弹出多个过期提示问题
          window.vueApp.showMsgBox({
            message: msg,
            detail: data,
            callback: () => {
              window.isSessionDialogOut = false;
            }
          });
        }
      },
      // 导出
      onExport() {
        const params = {
          condition: this.queryForm,
          selectList: this.resultSelectedData
        };
        this.api.export(params, 0).then(res => {
          if (res.code == 200) {
            // this.delayRequest(res.data.key);
            tools.downloadFile(res.data.key, "分配评阅专家.xls", null, this);
          }
        });
      },
      // 查文件导出状态，等待导出
      async delayRequest(key) {
        this.loading = true;
        await new Promise(resolve => setTimeout(resolve, 3000));
        this.api.getExportStatus(key).then(res => {
          this.loading = false;
          if (res.code === 200 && res.data.status) {
            let path = 'api/designservice/common/export?path=' + res.data.path;
            window.open(path);
          } else {
            this.delayRequest(key);
          }
        }).catch(err => {
          this.loading = false;
          this.delayRequest(key);
        });
      },
      downloadAttach(path){
        // 导出
        let loading = this.$loading({
          lock: false,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(255, 255, 255, .48)"
        });
        window.open("/api/commonservice/obsfile/downloadfile?objectkey=" + path)
        loading.close()
      }
    },
    components: {
      Assign: () => import('./components/assign')
    }
  };
</script>
<style lang="scss" scoped>
  .result-release {
    .search-item {
      width: 100%;
    }
  }
</style>
